{% extends "admin/base.html" %}

{% block content %}
<div class="jumbotron">
    <div class="container">
        <h1><b>{{"CTFd Owl Upload" if en else "CTFd Owl 题目源码上传"}}</b></h1>
    </div>
</div>
<div class="container">
    <svg hidden>
        <symbol id="copy" viewBox="0 0 24 24">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
        </symbol>
    </svg>
    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-pills flex-column">
            <li class="nav-item">
                <a class="nav-link rounded-0" href="/plugins/ctfd-owl/admin/settings">🔗{{"Owl Settings" if en else "Owl设置"}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-0" href="/plugins/ctfd-owl/admin/containers">🔗{{"Instances" if en else "实例列表"}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-0 active" href="#">{{"Upload" if en else "上传题目"}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-0" href="/plugins/ctfd-owl/admin/sources">🔗{{"Sources" if en else "源码列表"}}</a>
            </li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="form-group" id="drop">
                <p>{{"You can upload the zip source file, and the server will try to extract to dedicated source folder." if en else "您可以在下面上传docker-compose源码的zip文件，服务器端会尝试解压到对应文件夹。"}}</p>
                <div class="form-group">
                    <div style="display: flex;gap: 10px;">
                        <div style="flex: 1;">
                            <label for="folder_name">{{"Folder" if en else "文件夹"}}<br>
                                <small class="form-text text-muted">
                                    eg. fr000g/untrain1
                                </small>
                            </label>
                            <input type="text" class="form-control" name="folder_name" id="folder_name"
                                   placeholder="{{"Enter Folder Name" if en else "输入文件夹名称"}}" id="docker_name_input" value="" required>
                        </div>-
                    </div>
                </div>
                <div class="drop-area" ondragover="event.preventDefault()" ondrop="handleDrop(event)"
                     style="border: 2px dashed #ccc;padding: 20px;text-align: center;height: 200px;display: flex;align-items: center;justify-content: center;">
                    <div class="centered-content"
                         style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
                        <h2>{{"Drag and drop the zip file here to upload (please only drag and drop one file at a time)" if en else "将zip文件拖拽至此处上传(请一次仅拖拽一个文件)"}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script>
        function handleDrop(event) {
            event.preventDefault();
            if (folder_name.value=="")
            {
                var e = new Object;
                e.title = "{{'Warning' if en else '警告'}}";
                e.body = "{{'Folder name not set' if en else '未设置文件夹名称'}}";
                e.button="{{'Got it' if en else '知道了'}}";
                CTFd.ui.ezq.ezAlert(e)
                return;
            }
            var files = event.dataTransfer.files;
            var progressBarContainer = document.getElementById("drop");
            var file = files[0];
            var progressBar = createProgressBar(progressBarContainer);
            var fileNameElement = document.createElement('div');
            fileNameElement.classList.add('file-name');
            fileNameElement.textContent = file.name;
            fileNameElement.style = "margin-bottom: 5px;"
            progressBarContainer.appendChild(fileNameElement);
            uploadFile(file, progressBar, fileNameElement);
        }

        function createProgressBar(progressBarContainer) {
            var progressBar = document.createElement('div');
            progressBar.classList.add('progress-bar');
            progressBar.style = "width: 100%;background-color: #f5f5f5;border-radius: 4px;overflow: hidden;margin-bottom: 10px;margin-top: 5px;"

            var progress = document.createElement('div');
            progress.classList.add('progress');
            progress.style = "width: 0;height: 20px;background-color: #4caf50;transition: width 0.3s ease-in-out;"

            progressBar.appendChild(progress);
            progressBarContainer.appendChild(progressBar);

            return progressBar;
        }

        function updateProgress(progressBar, percent) {
            progressBar.getElementsByClassName('progress')[0].style.width = percent + '%';
        }

        function uploadFile(file, progressBar, fileNameElement) {
            var formData = new FormData();
            formData.append('file', file);
            formData.append("nonce", init.csrfNonce);

            $.ajax({
                url: '/plugins/ctfd-owl/admin/upload?name='+encodeURIComponent(folder_name.value),
                type: 'POST',
                headers: {
                    "Accept": "application/json; charset=utf-8"
                },
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (event) {
                        if (event.lengthComputable) {
                            var percent = Math.round((event.loaded / event.total) * 100);
                            progressBar.getElementsByClassName('progress')[0].style.width = percent + '%';
                        }
                    }, false);
                    return xhr;
                },
                success: function (response) {
                    fileNameElement.remove();
                    progressBar.remove();
                    folder_name.value="";
                    var e = new Object;
                    e.title = "{{'Upload success!' if en else '上传成功！'}}";
                    e.body = "{{'File upload success!' if en else '文件上传完成！'}}";
                    CTFd.ui.ezq.ezToast(e)
                },
                error: function (xhr, status, error) {
                    fileNameElement.remove();
                    progressBar.remove();
                    var e = new Object;
                    e.title = "{{'Upload fail!' if en else '上传失败！'}}";
                    e.body = JSON.parse(xhr.responseText).message;
                    e.button="{{'Got it' if en else '知道了'}}";
                    CTFd.ui.ezq.ezAlert(e)
                }
            });
        }
    </script>
{% endblock %}
